<template>
  <div ref="chart" class="the-time-chart"></div>
</template>
<script>
import axios from "axios";
import randomcolor from "randomcolor";
import Color from "color";
const libDP = require("../lib/Douglas-Peucker");
import * as echarts from "echarts";
// var echarts = require("echarts/lib/echarts");
// require("echarts/lib/chart/scatter");
// require("echarts/lib/chart/line");
// require("echarts/lib/chart/radar");
// require("echarts/lib/chart/custom");
// require("echarts/lib/component/graphic");
// require("echarts/lib/component/tooltip");
// require("echarts/lib/component/title");
// require("echarts/lib/component/axis");
// require("echarts/lib/component/graphic");
// require("echarts/lib/component/legend");
// debugger
const data0809Frogman =
  "https://qimage.owhat.cn/prod/master/image/4b0e2ca6-40fb-4593-8de1-845019aff3df";
const data0809DarkJplayS =
  "https://qimage.owhat.cn/prod/master/image/f90b5cb6-d61e-4aa3-8286-ba019c6ef461";
const data0809MZebral =
  "https://qimage.owhat.cn/prod/master/image/b5b1e074-32f0-4702-8e0e-a9d533ee9018";
const data0809iam4gnno =
  "https://qimage.owhat.cn/prod/master/image/4cfc3e17-7f19-4555-acc8-b99b6fd1ebd4";
const data0809Hieguin =
  "https://qimage.owhat.cn/prod/master/image/dd05a104-79af-4327-806e-b338661c5d8e";
const data0809RJ_CiNVe =
  "https://qimage.owhat.cn/prod/master/image/92ae7890-51d7-4adc-acbc-5b94670bb352";
const data0809peritaaa =
  "https://qimage.owhat.cn/prod/master/image/a82fafe6-3ab8-4e03-bb43-39815ecf33c6";
const data0809Henrique4Real =
  "https://qimage.owhat.cn/prod/master/image/089b9760-b68a-4370-b642-04d907160440";
const data0809Zizuzao =
  "https://qimage.owhat.cn/prod/master/image/645ab43a-0c95-4fea-b5e5-886cb8ba3d7d";
const data0809bisnag4 =
  "https://qimage.owhat.cn/prod/master/image/8ac2f4a0-a137-48a7-9984-229b49cd6efd";
const data0809SAMCRO_FPS =
  "https://qimage.owhat.cn/prod/master/image/e9c1cdb6-a514-44e1-aba7-9dbbdcad995c";
const data0809Quao =
  "https://qimage.owhat.cn/prod/master/image/3f5bf154-4e1c-4eb7-b3f4-1ab1b96c9611";
const data0809DrGordeira =
  "https://qimage.owhat.cn/prod/master/image/53226d2f-253d-42b4-b759-4c548e939904";
const data0809groppoRJ =
  "https://qimage.owhat.cn/prod/master/image/e457ff96-dcbe-4e43-8319-06cbd04ad9d1";
export default {
  name: "PlayerRoutes",
  data() {
    return {};
  },
  mounted() {
    let ele = this.$refs["chart"];
    let chart = echarts.init(ele);
    const SanhokLength = 408000;
    const MapSize = 1000;
    let _scale = MapSize / SanhokLength;

    this.ajaxGetData().then(async data => {
      // debugger;
      let testPointXY = [900, 900];

      let customSeries = data.map(e => {
        let match_id = e.match_id;
        let locations = e.locations;
        return {
          type: "custom",
          name: match_id,
          coordinateSystem: "none",
          data: [[1, 1]],
          renderItem: function(params, api) {
            // debugger
            let points = locations.map(e => [e.x, e.y].map(v => v * _scale));
            let dayu = points.find(
              e => e[0] > testPointXY[0] && e[1] > testPointXY[1]
            );
            // debugger;
            return {
              type: "group",
              children: [
                {
                  type: "polyline",
                  progressive: true,
                  shape: {
                    points: points,
                    smooth: 0.5
                  },
                  style: {
                    stroke:
                      (function() {
                        let rc = Color(randomcolor({ luminosity: "bright" }));
                        // debugger;

                        return (
                          "gray" ||
                          `rgba(${rc.color[0]},${rc.color[1]},${rc.color[2]},0.9)`
                        );
                      })() || "rgba(255,205,51,0.5)",
                    lineWidth: dayu ? 3 : 1,
                    fill: "rgba(0,0,0,0)"
                  }
                },
                {
                  type: "circle",
                  shape: {
                    cx: 0,
                    cy: 0,
                    r: 5
                  },
                  style: {
                    fill: "white",
                    //   "white" ||
                    //   centerColor ||
                    //   getGradientColorByValue(down) ||
                    //   `rgba(255,0,0,${down / indicator_max["down"]})`,
                    // opacity: 10.5,
                    // text: the_name_read,
                    textPosition: "bottom",
                    textFill: "white",
                    stroke: "white"
                  }
                }
              ]
            };
          }
        };
      });
      let traclus_data = await this.ajaxTraclusData();
      // debugger
      let series_traclus = (_ => {
        let sss = traclus_data.map(e => {
          // debugger;
          return {
            type: "custom",
            coordinateSystem: "none",
            data: [[1, 1]],
            renderItem: function() {
              let points = e.map(x => [x.x, x.y].map(v => v * _scale));
              return {
                type: "polyline",
                progressive: true,
                shape: {
                  points: points,
                  smooth: 0.5
                },
                style: {
                  lineWidth: 3,
                  fill: "rgba(0,0,0,0)",
                  stroke: `rgba(255,255,255,0.8)`
                }
              };
            }
          };
        });
        return sss;
      })();
      let o_data0924 = await this.ajax0924Cluster();
      // debugger;
      let series0924 = o_data0924.map(cluster => {
        // debugger;
        let color_cluster = randomcolor({ luminosity: "light" });
        return {
          type: "custom",
          coordinateSystem: "none",
          data: cluster.map((e, i) => [i]),
          renderItem: (param, api) => {
            // debugger;
            let d = cluster[api.value()];
            let points = [
              [d.start.x, d.start.y],
              [d.end.x, d.end.y]
            ].map(e => e.map(x => x * _scale));
            // debugger;
            return {
              type: "polyline",
              progressive: true,
              shape: {
                points: points,
                smooth: 0
              },
              style: {
                lineWidth: 1.3,
                fill: "rgba(0,0,0,0)",
                stroke: color_cluster
              }
            };
          }
        };
      });
      let partion_data = await this.ajaxPartionData();
      let series_partion = (_ => {
        let d = partion_data;
        // debugger;
        return d.map(l => {
          return {
            type: "custom",
            data: [0],
            coordinateSystem: "none",
            renderItem: () => {
              // debugger
              let points = [
                [l.start.x, l.start.y].map(v => v * _scale),
                [l.end.x, l.end.y].map(v => v * _scale)
              ];
              let dayu = points.find(
                e => e[0] < testPointXY[0] && e[1] > testPointXY[1]
              );
              return {
                type: "polyline",
                progressive: true,
                shape: {
                  points: points,
                  smooth: 0
                },
                style: {
                  lineWidth: dayu ? 4 : 0.5,
                  fill: "rgba(255,0,0,0)",
                  stroke: `rgba(255,0,255,0.5)`
                }
              };
            }
          };
        });
      })();

      let raw0830data = await this.ajax0830RawData();
      let importantIndex = -1;
      let serieses_raw0830 = raw0830data.trajectories.map((tra, i) => {
        return {
          type: "custom",
          coordinateSystem: "none",
          data: [[0]],
          renderItem: () => {
            let points = tra.map(e => [e.x, e.y].map(v => v * _scale));
            return {
              type: "group",
              children: [
                {
                  type: "polyline",
                  progressive: true,
                  shape: {
                    points: points,
                    smooth: 0
                  },
                  style: {
                    stroke: `rgba(255,255,255,${
                      i == importantIndex ? 0.8 : 0.5
                    })`,
                    lineWidth: i == importantIndex ? 2.5 : 0.5,
                    fill: "rgba(0,0,0,0)"
                  }
                },
                {
                  type: "text",
                  position: points[0] || points[points.length - 1],
                  style: {
                    text: `No:${i}`,
                    fill: "rgba(255,255,0,0)"
                  }
                }
              ]
            };

            /**
        
       */
          }
        };
      });
      // debugger

      let rawtrajectories = raw0830data.trajectories.filter(
        e => true || e.length > 2
      );
      console.log(rawtrajectories.length);
      let dpedTrajectories = rawtrajectories.map(e =>
        libDP.simplifyDouglasPeucker(e, (100 * 100) ** 2)
      );
      // console.log(rawtrajectories.map(e => e.length).join(","));
      // console.log(dpedTrajectories.map(e => e.length).join(","));
      let DPedSerieses = dpedTrajectories.map((tra, i) => {
        return {
          type: "custom",
          coordinateSystem: "none",
          data: [[0]],
          renderItem: () => {
            let points = tra.map(e => [e.x, e.y].map(v => v * _scale));
            return {
              type: "polyline",
              progressive: true,
              shape: {
                points: points,
                smooth: 0
              },
              style: {
                stroke: `rgba(255,0,0,${i == importantIndex ? 0.8 : 1.3})`,
                lineWidth: i == importantIndex ? 1.5 : 1.5,
                fill: "rgba(0,0,0,0)"
              }
            };
          }
        };
      });
      let Dp_points = dpedTrajectories.reduce((a, b) => a.concat(b));
      console.log({ Dp_points });
      let Dp_pointsSeries = {
        type: "custom",
        coordinateSystem: "none",
        data: Dp_points.map((e, i) => [i]),
        renderItem: (param, api) => {
          let p = Dp_points[api.value(0)];
          //  debugger
          return {
            type: "circle",
            progressive: true,
            shape: {
              cx: p.x * _scale,
              cy: p.y * _scale,
              r: 5
            },
            style: {
              fill: "rgba(255,255,255,0.5)",
              stroke: "rgba(0,0,0,0.1)"
            }
          };
        }
      };
      let dped0317data = await this.ajax210317Trajectories();
      let dped0317_polylines = dped0317data.map(etra => {
        return {
          type: "custom",
          coordinateSystem: "none",
          data: [[0]],
          renderItem: () => {
            let points = etra.simplified_points.map(e =>
              [e.x, e.y].map(v => v * _scale)
            );
            return {
              type: "group",
              children: [
                {
                  type: "polyline",
                  progressive: true,
                  shape: {
                    points: points,
                    smooth: 0
                  },
                  style: {
                    stroke: `rgba(255,0,0,0.01)`,
                    lineWidth: 1.5,
                    fill: "rgba(0,0,0,0)"
                  }
                },
                ...points.map(point => {
                  return {
                    type: "circle",
                    progressive: true,
                    shape: {
                      cx: point[0],
                      cy: point[1],
                      r: 3
                    },
                    style: {
                      fill: "rgba(255,255,255,0.5)",
                      stroke: "rgba(0,0,0,0.1)"
                    }
                  };
                })
              ]
            };
          }
        };
      });
      let clusterData0317 = await this.ajax210317DpedCluster();
      let clusterPoint0317 = clusterData0317.map(clu => {
        let color_cluster = randomcolor({ luminosity: "light" });
        // debugger;
        return {
          type: "custom",
          coordinateSystem: "none",
          data: [0],
          renderItem: () => {
            return {
              type: "group",
              children: clu.map(p => {
                return {
                  type: "circle",
                  shape: {
                    cx: p.x * _scale,
                    cy: p.y * _scale,
                    r: 4
                  },
                  style: {
                    x: p.x * _scale,
                    y: p.y * _scale,
                    width: 5,
                    height: 5,
                    fill:
                      "rgba(25,0,0,0.5)" ||
                      color_cluster ||
                      "rgba(255,0,0,0.8)",
                    stroke: color_cluster || "blue",
                    lineWidth: 1,
                    image:
                      "http://m.tuniucdn.com/fb2/t1/G7/M00/02/46/CkC9r1-DYvSINLKvAAABRm96umsAABQIAP__qIAAAFe902.png"
                  }
                };
              })
            };
          }
        };
      });
      // debugger;
      let clusterData = await this.ajaxClusterData();
      let cluster_serieses = clusterData.map((clu, i_cluster) => {
        // debugger
        let color_cluster = randomcolor({ luminosity: "light" });
        return {
          type: "custom",
          name: i_cluster,
          coordinateSystem: "none",
          data: [...clu],
          renderItem: function(params, api) {
            // debugger;
            let dataIndex = params.dataIndex;
            let d = clu[dataIndex];
            let points = [
              [d.start.x, d.start.y],
              [d.end.x, d.end.y]
            ].map(p => p.map(v => v * _scale));

            return {
              type: "polyline",
              shape: {
                smooth: 0,
                points: points
              },
              style: {
                stroke: color_cluster,
                lineWidth: 0.8,
                fill: "rgba(0,0,0,0)"
              }
            };
          }
        };
      });
      let sanhokAreasData = await this.ajaxSanhokAreas();
      // debugger;
      let sanhokAreasSeries = sanhokAreasData.map(area => {
        return {
          type: "custom",
          coordinateSystem: "none",
          data: [0],
          renderItem: function() {
            return {
              type: "group",
              children: [
                {
                  type: "rect",
                  shape: {
                    x: area.x[0] * _scale,
                    y: area.y[0] * _scale,
                    width: _scale * (area.x[1] - area.x[0]),
                    height: _scale * (area.y[1] - area.y[0])
                  },
                  style: {
                    stroke: "blue",
                    lineWidth: 0.1,
                    fill: "rgba(202,202,235,0.5)"
                  }
                }
              ]
            };
          }
        };
      });
      let dataPointsCluster1011 = await this.ajax1011Cluster();
      let seriesPoints1011 = dataPointsCluster1011.map(clu => {
        let color_cluster = randomcolor({ luminosity: "light" });
        // debugger;
        return {
          type: "custom",
          coordinateSystem: "none",
          data: [0],
          renderItem: () => {
            return {
              type: "group",
              children: clu.map(p => {
                return {
                  type: "circle",
                  shape: {
                    cx: p.x * _scale,
                    cy: p.y * _scale,
                    r: 4
                  },
                  style: {
                    x: p.x * _scale,
                    y: p.y * _scale,
                    width: 5,
                    height: 5,
                    fill:
                      "rgba(25,0,0,0.5)" ||
                      color_cluster ||
                      "rgba(255,0,0,0.8)",
                    stroke: color_cluster || "blue",
                    lineWidth: 1,
                    image:
                      "http://m.tuniucdn.com/fb2/t1/G7/M00/02/46/CkC9r1-DYvSINLKvAAABRm96umsAABQIAP__qIAAAFe902.png"
                  }
                };
              })
            };
          }
        };
      });
      let dataLines1018 = await this.ajax1018Lines();
      let seriesLine1018 = dataLines1018.map(line => {
        return {
          type: "custom",
          coordinateSystem: "none",
          data: [0],
          renderItem: () => {
            return {
              type: "group",
              children: [
                {
                  type: "line",
                  shape: {
                    x1: line.fromto[0].x * _scale,
                    y1: line.fromto[0].y * _scale,
                    x2: line.fromto[1].x * _scale,
                    y2: line.fromto[1].y * _scale
                  },
                  style: {
                    stroke: randomcolor({ luminosity: "light" }),
                    fill: "red",
                    lineWidth: line.count
                  }
                }
              ]
            };
          }
        };
      });
      // debugger;
      // debugger
      // debugger;
      chart.setOption({
        title: {
          text: ""
        },
        backgroundColor: "black",
        tooltip: {
          trigger: "axis"
        },
        legend: {
          left: "center",
          data: []
        },
        graphic: [
          {
            type: "image",
            id: "logo",
            right: 0,
            top: 0,
            z: -10,
            bounding: "raw",
            origin: [0, 5],
            style: {
              image:
                "http://m.tuniucdn.com/fb2/t1/G6/M00/F0/BC/Cii-TF781C2IcJj7AA590so7b_UAANa_AI4S9UADn3q184.jpg",
              width: 1000,
              height: 1000,
              opacity: 0.5
            }
          },
          {
            type: "text",
            left: "0",
            top: "0",
            style: {
              fill: "#fff",
              // text: "Hieguin",
              font: "bold 26px Microsoft YaHei"
            }
          }
        ],
        series: [
          // ...dped0317_polylines,
          ...clusterPoint0317,
          // ...serieses_raw0830,
          // Dp_pointsSeries,
          // ...sanhokAreasSeries,
          // ...seriesPoints1011
          // ...seriesLine1018
          // ...series0924,
          // ...DPedSerieses,
          // ...series_partion,
          // ...cluster_serieses,
          // ...series_traclus
        ]
      });
    });
  },
  methods: {
    ajaxGetData() {
      return new Promise(resolve => {
        axios
          .get(data0809Frogman)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajaxTraclusData() {
      const data0824Frogman = [
        "https://qimage.owhat.cn/prod/master/image/dfb19906-735e-4125-b311-ffdc3f8faa8c",
        "https://qimage.owhat.cn/prod/master/image/53f7232d-640e-4aae-a9f7-c35dfdc6abde",
        "https://qnm.hunliji.com/FtUPK5F2i17RPhMBsm5-BA4Wmo9-",
        "https://qnm.hunliji.com/FipEyRDnUbme1Cjp9Oykz0TsrnLG",
        "https://qnm.hunliji.com/Fo92XqaLiYp5LcbONNHRSxp8HjFW",
        "https://qnm.hunliji.com/FjpsWxdeYGxTE_5r86RrkNUlIs12",
        "https://qnm.hunliji.com/FiTJ2XhL_4j8bjSdK3-rK23p0cRl",
        "https://qnm.hunliji.com/FtRfqsI2fg_Rf1nhSygQdKKnsAPS",
        "https://qnm.hunliji.com/FuGlGJ-3DxVGHPYEnTTSTlS2uPjO",
        "https://qnm.hunliji.com/FqRAxl0ByvcQ5h7pCibO5HExkAJv",
        "https://qnm.hunliji.com/FhG72IAsljCdfYoa0HAruDZAI0To"
      ];
      return new Promise(resolve => {
        axios
          .get(data0824Frogman[0])
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajaxPartionData() {
      let partion =
        "https://qimage.owhat.cn/prod/master/image/e6662700-aed0-4dc2-8875-708cf866c94a";
      let partion_python =
        "https://qimage.owhat.cn/prod/master/image/1e71e94f-f0fe-452d-9197-89382dcc0e57";
      return new Promise(resolve => {
        axios
          .get(partion_python)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    //0909标记准备改?
    ajaxClusterData() {
      let partion =
        "https://qimage.owhat.cn/prod/master/image/e7350202-bf74-4d8a-9797-dfaae6dcb3db  ";
      return new Promise(resolve => {
        axios
          .get(partion)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            // debugger;
          });
      });
    },
    ajax0830RawData() {
      let link =
        "https://qimage.owhat.cn/prod/master/image/49002b47-428f-4f86-9f71-3cfbd8b4d981";
      return new Promise(resolve => {
        axios
          .get(link)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajax0924Cluster() {
      //
      let link =
        "http://m.tuniucdn.com/fb2/t1/G7/M00/02/1D/CkC9Y19wmbSIMX14AAAGXYAqVvUAABKXwP_-DgAAAZ148.json";
      return new Promise(resolve => {
        axios
          .get(link)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajax1011Cluster() {
      //
      let link =
        "http://m.tuniucdn.com/fb2/t1/G7/M00/02/80/CkC9r1-DXiWIe3k1AAAOmFvz0OYAABXWgP_8VAAAA6w17.json";
      return new Promise(resolve => {
        axios
          .get(link)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajaxSanhokAreas() {
      //
      let link =
        "http://m.tuniucdn.com/fb2/t1/G7/M00/02/96/CkC9Y1-DXoKIIuCCAAAGR6zFewQAABZvwP_-ZsAAAZl81.json";
      return new Promise(resolve => {
        axios
          .get(link)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajax1018Lines() {
      let link =
        "http://m.tuniucdn.com/fb2/t1/G7/M00/02/D3/CkC9r1-MuQeIZvjkAAAJZLdpWaYAABh8QP_9oQAAAl803.json";
      return new Promise(resolve => {
        axios
          .get(link)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajax210317Trajectories() {
      let link =
        "https://qimage.owhat.cn/prod/master/image/8226cfc2-5aae-4494-9088-9f15d51234f4";
      return new Promise(resolve => {
        axios
          .get(link)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajax210317DpedCluster() {
      let link =
        "https://qimage.owhat.cn/prod/master/image/a0fd52e8-e45a-4983-88e5-34f4878c9365#50米";
        link = "https://qimage.owhat.cn/prod/master/image/fdd0ae1b-0b58-411a-abcc-0c8b6fcb4d3c#30米"
        link = "https://qimage.owhat.cn/prod/master/image/b17a670d-be25-4ed3-a271-6eac2d2df198#20米"
        link = "https://qimage.owhat.cn/prod/master/image/c0c014da-2c24-46f5-ac15-0bcb96fdfae4#10米"
        link = "https://qimage.owhat.cn/prod/master/image/334f56c5-fd9a-4a3e-b40d-aef124a6ab55#15米"
      return new Promise(resolve => {
        axios
          .get(link)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.the-time-chart {
  width: 1000px;
  height: 1000px;
}
</style>